import { createStyles } from 'antd-style';
import { } from 'antd'

const useStyles = createStyles(({ token }) => {
  return {
    container: {
      // width: '80%',
      // margin: '0 auto',
      // paddingTop: 80,

    },
    header: {
      height: 60,
      boxShadow: '0 0 2px #ccc',
      backgroundColor: '#fff',

    },
    header_wrap: {
      height: 60,
      width: '70%',
      margin: '0 auto',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',

    },
    header_left: {
      fontSize: 24,
      fontWeight: 'bold'
    },
    header_right_menu: {
      display: 'flex',
      alignItems: 'center',
      gap: 40,
      fontSize: 18,
      color: '#000',
    },
    banner1: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: 'linear-gradient(148deg, rgb(238, 238, 246), rgb(248, 249, 252))',
      padding: '40px 0',
      // background: 'url(http://dmeter.cn/assets/background-Sa1aDD1c.png) no-repeat center' ,
    },
    banner1_left: {
      width: 371,
    },
    banner1_right: {},


    banner2: {
      padding: '60px 0 0',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center'
    },
    title: {
      fontSize: 60,
      fontWeight: 'bold',
      margin: '0 auto',
      marginBottom: 30
    },
    line: {
      marginBottom: '100px',
      width: '35vw',
      height: '2px',
      backgroundImage: 'linear-gradient(to right, transparent, #3260ad, transparent)',
    },

    banner3: {
      display: 'flex',
      alignItems: 'center',
      // height: 412,
      paddingBottom: 100,
      width: 1000,
      margin: '0 auto',
      justifyContent: 'space-between'
    },
    banner4: {
      display: 'flex',
      alignItems: 'center',
      background: 'linear-gradient(148deg, rgb(238, 238, 246), rgb(248, 249, 252))',
      height: 412,
      // width: 1000,
      // padding: '0 15%',
      // width: '70%',
      // margin: '0 auto',
      justifyContent: 'center',
    },
    banner4_wrap: {
      width: 1000,

      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    banner5: {
      display: 'flex',
      alignItems: 'center',
      height: 412,
      width: 1000,
      margin: '0 auto',
      justifyContent: 'space-between',
    },

    img_wrap: {
      border: `5px solid ${token.colorBorder}`,
      borderRadius: 15,
      overflow: 'hidden',
    },
    desc: {
      fontSize: 20,
      fontWeight: 'bold',
    },
    banner6: {
      background: 'linear-gradient(148deg, rgb(238, 238, 246), rgb(248, 249, 252))',
      padding: '60px 0 30px',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center'
    },
    banner7: {
      background: 'linear-gradient(148deg, rgb(238, 238, 246), rgb(248, 249, 252))',
      width: '100%',
      height: 900,
      borderRadius: 30,
      margin: '0 auto',
      padding: '0 0 30px'
    },
    banner8: {
      textAlign: 'center',
      padding: '60px 0',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
    }

  };
});

export default useStyles;
